<template>
    <div class="all">
        <div class="Upload">
            <img src="@/assets/网址上传.png" style="width:25px;position: absolute;top:22px;" />
            <h3 style="position: relative;left:30px;">网址分析上传</h3>
            <div class="UploadT">
                <template v-for="(item, index) in Url" :key="index">
                    <el-input v-model="Url[index].url" style="max-width: 1250px;margin-bottom: 20px;"
                        placeholder="Please input">
                        <template #prepend>序号：{{ index + 1 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Http://</template>
                    </el-input>
                    <img src="@/assets/成功.png" v-show="Url[index].ifShow" @click="ToDetectionResult(Url[index])"
                        style="width:27px;position: relative;left:20px;">
                </template>
                <div>
                    <el-icon @click="AddUrl"
                        style="background-color: rgba(255, 255, 255, 0.4);position: relative;left:1220px;width: 30px;height:30px;border-radius: 3px;">
                        <CirclePlus style="width:50px;color:white;" />
                    </el-icon>
                    <el-icon @click="RemoveUrl"
                        style="background-color: rgba(255, 255, 255, 0.4);position: relative;left:-30px;width: 30px;height:30px;border-radius: 3px;">
                        <Remove style="width:50px;color:white;" />
                    </el-icon>
                </div>
            </div>
        </div>
        <div
            style="background-color: rgba(0, 0, 0, 0.3); width:95%;height:60px;position:relative;top:30px; left:35px;box-shadow: 0 0px 35px rgba(0, 20, 230, 0.6);border-radius: 10px;">
            <el-button class="detection" type="primary" plain @click="StartDetection()">立即检测</el-button>
            <el-progress v-if="show === 1" class="percent" :percentage="percentage" :text-inside="true"
                :stroke-width="20" striped striped-flow :duration="25" />
            <el-progress v-if="show === 2" class="percent" :percentage="percentage" :stroke-width="20" status="success"
                striped striped-flow :duration="25" />
            <el-progress v-if="show === 3" class="percent" :percentage="percentage" :stroke-width="20"
                status="exception" striped striped-flow :duration="0" />
            <el-button class="detectionEnd" type="primary" plain @click="EndDetection()">结束检测</el-button>
        </div>
        <h1 style="color:white;position:absolute;top:450px;left:600px;">网址分析上传</h1>
        <div style="height:200px;width:100%;position: absolute;top:1450px;"></div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
// import Directory from '../main/file/Directory.vue'
import { useRouter } from 'vue-router';
const router = useRouter();



const Url = reactive([
    {
        url: '',
        ifShow: false
    },
    {
        url: '',
        ifShow: false
    },
    {
        url: '',
        ifShow: false
    }
]
)

function AddUrl() {
    Url.push({
        url: '',
        ifShow: false
    });
}
function RemoveUrl() {
    if (Url.length > 0) {
        Url.pop();
    }
}


const show = ref(1)
const canChange = ref(true)
import { ElMessage, ElMessageBox } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import axios from 'axios'
const percentage = ref(0)
//非线性增长效果
function animateProgress(currentPercentage, targetPercentage) {
    // 设置一个增加的步长，可以根据需要调整
    const step = 0.01; // 每次增加1个百分点

    // 判断当前百分比是否小于目标百分比
    if (currentPercentage < targetPercentage) {
        percentage.value += step;
        currentPercentage += step;// 增加百分比值
        console.log('1111')

        // 使用 requestAnimationFrame 来持续执行动画
        requestAnimationFrame(animateProgress);
    } else {
        percentage.value = targetPercentage; // 当达到目标百分比时，直接设置为目标值
    }
}
const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
    if (canChange.value === true) {
        if (!fileList.value.includes(uploadFile)) {
            fileList.value.push(uploadFile);
        }
    } else {
        ElMessage({
            message: '正在检测，请不要随意修改文件',
            type: 'warning',
        })
    }
}
function ToDetectionResult(file) {
    if (file.ifShow) {
        let url1 = `/Main/DetectionResult/WK.apk`;  //对接口的时候要改param1
        // 使用window.open打开新标签页  
        window.open(url1, '_blank');
    } else {
        ElMessage({
            message: '该文件还未检测完成，请等待检测完成',
            type: 'warning',
        })
    }
}
function StartDetection() {
    console.log('response')
    canChange.value = false;
    show.value = 1;
    axios({
        url: 'https://apifoxmock.com/m2/4743995-0-default/194183792',
        method: 'POST',
        data: {
            urlList: Url.value,
        }
    }).then((Response) => {
        console.log('response', Response.data,Response.data.code === 1)
        if (Response.data.code === 1) {
            percentage.value=100
            Url.forEach((newUrl, index) => {
                if (newUrl.url !== '') {
                    Url[index].ifShow = true;
                } else {
                    Url[index].ifShow = false;
                }
                console.log("url", Url.value)
            });
        } else {
            ElMessage({
                message: '上传错误,请重新上传',
                type: 'warning',
            })
        }
    }).catch((error) => {
        ElMessage({
            message: '上传错误,请重新上传',
            type: 'warning',
        })
    })
}

function EndDetection() {
    canChange.value = true;
    show.value = 3;
    clearInterval(intervalId);
    console.log('清除计时器')
}
</script>
<style scoped>
h3 {
    color: white;
    position: relative;
    top: -10px;
    margin-bottom: 10px;
}

.percent {
    width: 80%;
    height: 1px;
    position: absolute;
    top: 40px;
    left: 135px;
}

.percent {
    color: white !important;
}

.detection {
    position: absolute;
    top: 15px;
    left: 20px;
}

.detectionEnd {
    position: absolute;
    top: 15px;
    right: 20px;
}

.all {
    position: absolute;
    top: 130px;
    width: 100% !important;
    height: 670px !important;
    overflow-y: auto;
}

.Upload {
    width: 95%;
    height: 45%;
    background-color: rgba(0, 0, 0, 0.3);
    position: relative;
    left: 35px;
    top: 20px;
    border-radius: 10px;
    padding-left: 30px;
    padding-top: 30px;
    box-shadow: 0 0px 25px rgba(0, 20, 230, 0.6);
    overflow: hidden;
}

.Upload::-webkit-scrollbar {
    width: 5px;
}

.UploadT {
    overflow-y: auto;
    height: 220px;
}

.all::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

.UploadT::-webkit-scrollbar {
    width: 8px;
    height: 4px;
}

.UploadT::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 滚动条的背景颜色 */
    border-radius: 10px;
    /* 可选：滚动条的圆角 */
}

.UploadT::-webkit-scrollbar-thumb {
    background: #cacaca;
    /* 滑块（thumb）的颜色 */
    border-radius: 10px;
    /* 滑块（thumb）的圆角 */
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    /* 可选：滑块（thumb）的阴影效果 */
}

.UploadT::-webkit-scrollbar-thumb:hover {
    background: #9d9d9d;
    /* 滑块（thumb）在鼠标悬停时的颜色 */
}
</style>